<template>
	<u-popup @close="close" @open="open" :mask-close-able="maskClose" 
	v-model="popShows" 
	mode="center" 
	:border-radius="bordRadio" 
	:width="width" :closeable="closeable">
		<view class="tips_pop overfHidden">
			<view class="flex_hcneter_col pop_headImg overfHidden">
				<!-- <u-image
				class=""
				style="width: 100%;"
				mode="aspectFill"
				width="100%"
				height="183rpx" 
				:src="headImg"></u-image> -->
				<image 
				style="width: 100%; height: 183rpx;" 
				 :src="headImg"></image>
				<!-- <view class="pop_headerImg"></view> -->
				<view class="pop_title">
					{{popTitle}}
				</view>
			</view>
			<view class="pop_smtitle txt-ellipsis" v-if="popsmTitle">
				{{popsmTitle}}
			</view>
			<view class="pop_center1" v-if="contModel == 2">
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<rich-text :nodes="popCont"></rich-text>		
					<slot name="cont_text"></slot>	
				</scroll-view>
			</view>
			<view class="pop_center"  v-if="contModel == 1">
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<rich-text  :nodes="popCont"></rich-text>	
					<slot name="cont_text"></slot>		 
				</scroll-view>
			</view>
			
			<view class="pop_center" v-if="contModel == 3">
				<view 
				style="max-height: 600rpx;overflow: auto;box-sizing: border-box;" 
				class="center_cont1">
					<rich-text :nodes="popCont"></rich-text>		 	
				</view>
			</view>
			
			<view v-if="contModel == 3" class=" flex_hcneter model_tishi" @click="radios">
				 <radio color="#4240FF" value="true" :checked="radioCH"></radio>
				 7天内不在提示
			</view>
			
			<view class="flex_hcneter" v-if="btModel == 2">
				<view 
				v-if="popbtCancel"
				class="footer_bt1 flex_zhcenter" @click="close('close')" 
				:style="{width:popbtConfim ? '50%' : '100%'}"
				>
					{{popbtCancel}}
				</view>
				<view 
				v-if="popbtConfim"
				class="footer_bt1 flex_zhcenter" 
				:style="{width:popbtCancel ? '50%' : '100%'}"
				 @click="confim">
					{{popbtConfim}}
				</view>
			</view>
			
			<view class="pop_footer flex_zhcenter" v-if="btModel == 1 && popbtCancel">
				<view class="footer_bt flex_zhcenter"  @click="close('close')">
					{{popbtCancel}}
				</view>
			</view>
			
			<view class="pop_footer flex_zhcenter" v-if="btModel == 3 && popbtCancel">
				<view class="model3">
					{{popbtCancel}}
				</view>
			</view>
			
			<view class="pop_footer flex_zhcenter" v-if="btModel == 4 && popbtConfim">
				<view class="comm_btn model4 flex_zhcenter"  @click="confim">
					{{popbtConfim}}
				</view>
			</view>
			
		</view>
		<view class="flex_zhcenter">
			<view class="tips_footer flex_zhcenter" v-if="bottomCloseIcon">
				<image
				:src="imgPath.coupon_coupon_dialog_close_icon" 
				mode="aspectFit" 
				class="close-icon" 
				@click="close('close')"/>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import  { imgPath } from '@/static/imgPath.js'
	export default {
	  name: "index",
	  components: {
	    
	  },
		props: {
			bottomCloseIcon: {//是否显示底部关闭按钮
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			maskClose: {//点击遮罩是否关闭
				type: [Boolean],
				default:()=>{
					return true
				}
			},
			btModel: {//按钮模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			contModel: {//内容模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			headImg: {//头部图片
				type: [String],
				default:()=>{
					return ''
				}
			},
			popbtConfim: {//确定按钮
				type: [String],
				default:()=>{
					return '确定'
				}
			},
			popbtCancel: {//取消按钮
				type: [String],
				default:()=>{
					return '关闭'
				}
			},
			popCont: {//确定按钮
				type: [String],
				default:()=>{
					return `
					<div class="text-indent">用户未主动扫码被巡检员取证产生的<span class="item_staColor_red">车牌欠费</span>记录，
					主动确认停车的记录在登记记录页面查询。</div>`
				}
			},
			popsmTitle: {//小标题
				type: [String],
				default:()=>{
					return ''
				}
			},
			popTitle: {//弹窗标题
				type: [String],
				default:()=>{
					return '温馨提示'
				}
			},
			popShow: {//弹窗显示隐藏
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			bordRadio: {//圆角
				type: [Number,String],
				default:()=>{
					return 22
				}
			},
			width: {//宽度
				type: [Number,String],
				default:()=>{
					return '600rpx'
				}
			},
			closeable: {//是否显示关闭按钮
				type: [Boolean],
				default:()=>{
					return false
				}
			},
		},
	  data() {
	    return {
				popShows:false,
				
				radioCH:false,
				imgPath,
	    };
	  },
		watch:{
			popShow(val){
				console.log(val)
				this.popShows = val
			},
		},
	  mounted() {
	    this.popShows = this.popShow
	  },
	  methods: {
			contFlag(){
				this.$nextTick(()=>{
					if(!this.popConts) this.popShows = false
				})
			},
			radios(){
				this.radioCH = !this.radioCH
			},
			open(){
				this.popShows = this.popShow
			},//打开弹窗
			close(e){//关闭弹窗
				this.popShows = false
				this.$emit('close',e)
			},
			confim(){
				this.popShows = false
				this.$emit('confim',this.radioCH)
			}
	  }
	};
</script>

<style>
	/deep/ .u-mode-center-box{background-color: rgba(255, 255, 255, 0);}
</style>

<style lang="less" scoped>
	// text-indent:2em;
	.tips_footer{
		position: absolute;bottom: -62px;
		.ceshi{color: #fff;}
		.close-icon{
			width: 61rpx;
			height: 61rpx;margin-top: 60rpx;
		}
	}
	.tips_pop{
		background-color: #fff;border-radius: 22rpx;
		.pop_center,.pop_center1{font-size: 32rpx;line-height: 50rpx;box-sizing: border-box;overflow: auto;}
		.pop_center{margin: 42rpx 60rpx 40rpx;}
		.pop_center1{text-align: center;margin: 66rpx 60rpx;}
		.pop_headImg{position: relative;justify-content: center;height: 182rpx;}
		.pop_title{position: absolute;color: #fff;font-size: 54rpx;}
		.pop_headerImg{
			height: 182px;background: linear-gradient(to bottom, #00C6FF,#0072FF);border-radius: 0 0 40% 40%;
			width: 100%;
		}
		.pop_smtitle{font-size: 36rpx;color: #007AFF;margin-top: 50rpx;text-align: center;padding: 0 30rpx;box-sizing: border-box;}
		.model3{text-align: center;color: #0076FF;font-size: 30rpx;}
		.footer_bt{
			width: 100%;border-radius: 80rpx;height: 80rpx;font-size: 30rpx;
			color: #0076FF;border: 2rpx solid #0076FF;
		}
		.footer_bt1{
			height: 84rpx;border-top: 2rpx solid rgba(112, 112, 112,0.41);color: #939393;font-size: 32rpx;
			border-right: 2rpx solid rgba(112, 112, 112,0.41);
		}
		.footer_bt1:last-child{border-right: 0rpx;color: #0089FF;}
		.pop_footer{padding: 0 60rpx 40rpx;box-sizing: border-box;}
		.model4{border-radius: 46rpx;width: 100%;}
		.center_cont1{
			background-color: #F2F7FB;border-radius: 32rpx;padding: 20rpx;box-sizing: border-box;
			
		}
		.model_tishi{
			font-size: 24rpx;font-family: PingFang SC, PingFang SC-Bold;font-weight: 700;
			color: #999999;padding-right: 30rpx;
			margin: 0 60rpx 40rpx;
			radio{transform:  scale(0.7); }
		}
	}
</style>